/* @use "element-plus/theme-chalk/src/index.scss" as *; */
@use 'sass:map';
@use 'sass:color';

$--colors: (
  'primary': (
    'base': #4073ff
  ),
  'success': (
    'base': #219fa4
  ),
  'warning': (
    'base': #f2711c
  ),
  'danger': (
    'base': #ff6a6a
  ),
  'error': (
    'base': #ff6a6a
  ),
  'info': (
    'base': #999
  )
);
$--font-size: (
  'extra-large': 40px,
  'large': 24px,
  'medium': 18px,
  'base': 16px,
  'small': 14px,
  'extra-small': 12px
);
$--text-color: (
  'primary': #333,
  'regular': #666,
  'secondary': #909399,
  'placeholder': #d2d2d2,
  'disabled': #d2d2d2
);
$--fill-color: (
  '': #f0f2f5,
  'light': #f5f7fa,
  'lighter': #f7f7ff,
  'extra-light': #fafcff,
  'dark': #ebedf0,
  'darker': #e6e8eb,
  'blank': #fff
);

// 间距定义的全局变量
$spacing: (
  'firstGear': 8px,
  'secondGear': 16px,
  'thirdGear': 24px,
  'fourthGear': 32px,
  'fifthGear': 40px
);
$backgroundColor: #f1f1f5;
$MapToolbarIconColor: #3b5efd;
$MapToolbarUnActiveIconColor: #a4b0cb;
$cardBorderRadius: 10px;

// You should use them in scss, because we calculate it by sass.
// comment next lines to use default color
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  // do not use same name, it will override.
  $colors: $--colors,
  // $button-padding-horizontal: ("default": 50px),
  $header:
    ('height': map.get($spacing, 'firstGear') * 6, 'padding': 0 map.get($spacing, 'secondGear')),
  $main: ('padding': map.get($spacing, 'firstGear') map.get($spacing, 'secondGear')),
  $text-color: $--text-color,
  $font-size: $--font-size,
  $fill-color: $--fill-color,
  $card: (padding: map.get($spacing, 'secondGear'), border-radius: var(--el-border-radius-base)),
  $menu: (
    'item-font-size': map.get($--font-size, 'small'),
    'base-level-padding': map.get($spacing, 'secondGear'),
    'level-padding': map.get($spacing, 'secondGear'),
    'icon-width': map.get($spacing, 'secondGear') - 2px,
    'item-height': map.get($spacing, 'fifthGear'),
    'sub-item-height': map.get($spacing, 'fifthGear'),
    'horizontal-sub-item-height': map.get($spacing, 'fifthGear')
  ),
  $tag: ('font-size': map.get($--font-size, 'small')),
  $link: ('font-size': map.get($--font-size, 'small')),
  $table: (
    'row-hover-bg-color': color.adjust(map.get($--colors, 'primary', 'base'), $lightness: 35%),
    'header-text-color': map.get($--text-color, 'primary')
  ),
  $dialog: (
    'title-font-size': var(--el-font-size-medium),
    'padding-primary': map.get($spacing, 'secondGear'),
    'border-radius': $cardBorderRadius
  ),
  $messagebox: ('border-radius': $cardBorderRadius),
  $popover: ('border-radius': map.get($spacing, 'firstGear')),
  $radio: ('font-size': map.get($--font-size, 'small'))
);

// if you want to import all
// @use "element-plus/theme-chalk/src/index.scss" as *;

// You can comment it to hide debug info.
// @debug $--colors;

:export {
  primaryColor: map.get($--colors, 'primary', 'base');
  successColor: map.get($--colors, 'success', 'base');
  warningColor: map.get($--colors, 'warning', 'base');
  dangerColor: map.get($--colors, 'danger', 'base');
  errorColor: map.get($--colors, 'error', 'base');
  infoColor: map.get($--colors, 'info', 'base');
  blackColor: var(--el-font-size-black);
  whiteColor: var(--el-font-size-white);
  spacingFirstGear: map.get($spacing, 'firstGear');
  spacingSecondGear: map.get($spacing, 'secondGear');
  spacingThirdGear: map.get($spacing, 'thirdGear');
  spacingFourthGear: map.get($spacing, 'fourthGear');
  spacingFifthGear: map.get($spacing, 'fifthGear');
}
